<template>
  <div class="player">
    <div class="player_disk">
      <disk />
    </div>
    <div class="player_control">
      <control />
    </div>
    <div class="player_progress" :class="{ player__playing: isPlaying }">
      <progress-bar />
    </div>
    <div class="player_out_spectrum" :class="{ player__playing: isPlaying,  spectrum__playing:  isPlaying }">
      <canvas id="oscilloscope"></canvas>
    </div>
  </div>
</template>

<script>
import Disk from './slots/Disk.vue'
import Control from './slots/Control.vue'
import ProgressBar from './slots/ProgressBar.vue'
import { mapState, mapMutations } from 'vuex'
import { localStorage } from '@/utils/common.js';
import { cloudMusicLogin, cloudMusicList, cloudMusicGetListInfo, cloudMusicGetMusicUrl, cloudMusicRefresh, cloudMusicIsLogin, cloudMusicLogout } from '@/api/cloudMusic/cloudmusic.js';
import { player } from './player'
export default {
  name: "CloudMusicBox",
  components: {
    Disk,
    Control,
    ProgressBar
  },
  async created() {
    await this.cloudMusicLogin()
    // await cloudMusicRefresh()
    // await cloudMusicIsLogin()
    // await cloudMusicLogout()
  },
  computed: {
    // 暂时搁置：mini嵌入模式不需要显示完整列表
    ...mapState(['musicModel', 'playList', 'finCurrent', 'isPlaying'])
  },
  methods: {
    // 暂时搁置：mini嵌入模式不需要显示完整列表
    ...mapMutations(['updateMusicModel', 'updatePlayList', 'updateFinCurrent']),
    /** 
        *逻辑: 
        *1. 登录账号(部分歌曲需要会员)
        *2. 查找所有歌单
        *3.获取歌单信息
        *4.根据歌单信息获取歌曲(可播放链接) 
    */
    cloudMusicLogin() {
      let that = this
      let params = {
        phone: 18718743264,
        password: '90d3883708c407d1'
      }
      cloudMusicLogin(params).then(res => {
        // console.log(res, 'fetchLocation')
        if (res.code == 200 && res.account) {
          localStorage.set('cloudID', res.account.id)
          // console.log(res, '???')
        }
        /*
            
        */
      }).then(() => {
        that.cloudMusicList()
      })
    },
    cloudMusicList() {
      let that = this
      let params = {
        uid: localStorage.get('cloudID')
      }
      cloudMusicList(params).then(res => {
        if (res.code == 200 && res.playlist) {
          // 博客歌单id
          localStorage.set('musicListID', res.playlist[3].id)
        }
      }).then(() => {
        that.cloudMusicGetListInfo()
      })
    },
    cloudMusicGetListInfo() {
      let that = this
      let params = {
        id: localStorage.get('musicListID')
      }
      cloudMusicGetListInfo(params).then(res => {
        if (res.code == 200 && res.songs) {
          that.updateMusicModel(res.songs)
          // 备用
          // localStorage.set('musicModel', res.songs)
        }
        /*
            
        */
      }).then(() => {
        that.cloudMusicGetMusicUrl('init')
      })
    },
    cloudMusicGetMusicUrl(type) {
      let that = this
      let tempModel = this.musicModel
      // 必选参数 : id : 音乐 id level: 播放音质等级, 分为 standard => 标准,higher => 较高, exhigh=>极高, lossless=>无损, hires=>Hi-Res
      let params = { level: 'exhigh', id: "" }

      if (type == 'init') {
        // 初始化只加载一首，提高性能
        params.id = tempModel[0].id
      } else {
        params.id = type
      }

      cloudMusicGetMusicUrl(params).then(res => {
        if (res.code == 200 && res.data) {
          res.data.map(item => {
            let model = `${item.url}^$${type == 'init' ? tempModel[0].id : type}`
            // 更新总模型
            that.updatePlayList(model)
          })
        }

      }).then(() => {
        if (type == 'init') {
          this.musicInit()
        }
        // 判断是否更新完
        if (this.playList.length == this.musicModel.length) {
          // 加入播放列表
          this.playList.map((item, index) => index > this.finCurrent && player.append(item))
          this.updateFinCurrent(this.playList.length - 1)
        }
      }
      )
    },
    musicInit() {
      let playList = this.playList
      playList.map(item => player.append(item))
      // 初始化索引
      this.updateFinCurrent(0)
      setTimeout(() => { this.musicLoader() }, 3000)
    },
    musicLoader() {
      let that = this
      // 设置模型截取开始位置为已有长度
      this.updateFinCurrent(this.playList.length - 1)
      let tempModel = this.musicModel
      // 返回之前加载完位置的数据
      let listArr = tempModel.filter((item, index) => index > that.playList.length - 1 && item.id)
      listArr.map((item) => {
        // 更新总列表
        that.cloudMusicGetMusicUrl(item.id)
      })

    }

  },
}
</script>

<style lang="scss">
@import '@/assets/styles/common.scss';

.player {
  margin: 70px 0px 20px;
  position: relative;
  display: flex;
  max-width: 370px;
  max-height: 75px;
  width: 370px;
  height: 75px;
  border-radius: 8px 8px 0 0;
  background-color: white;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12),
    0 20px 20px rgba(95, 23, 101, 0.2);
}

.player_disk {
  flex: 1.2;
  padding: 12px;
}

.player_control {
  flex: 2;
  padding: 12px 0;
  padding-right: 12px;
}

.player_progress {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  bottom: 25px;
  z-index: -1;
}

.player_out_spectrum {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  bottom: 25px;
  z-index: -1;
  height: 100%;
  scale: 1.055;
}

#oscilloscope{
  width: 100%;
  height: 100%;
  border-radius: 0 0 8px 8px;
}

.player__playing {
  z-index: 1;
}

.spectrum__playing {
  transform: translateY(98%);
}

</style>
